<html>
	<head>
		<title>Menu Test</title>
		<link rel="stylesheet" type="text/css" href="css/jCaramel.css"/>
		<link rel="stylesheet" type="text/css" href="css/icons.css"/>
		<script src="js/jquery-1.4.2.min.js"></script>
		<script src="js/jCaramel-core-1.0.js"></script>
		<script src="js/jCaramel-menu-1.0.js"></script>
		<style>
			body{
				font-family:"Lucida Sans Unicode";
				direction:ltr;
				
			}
			form{
				margin:5em;
			}
			button{
				
			}
			.icon-16 { background-image:url(css/icons-16.png) }
			
			#palette{
				height:150px;
				overflow:auto;
			}
			
			#palette div{
				display:block;
				float:left;
				width:20px;
				height:20px;
				margin:3px;
				border:solid 1px black;
			}
		</style>
		<script>
			
			var tb;
			
			$(function(){
				
				$(document).mousemove(function(evt){
							
							if(jCaramel.menu.mouseOverMenus(evt.pageX, evt.pageY)){
								document.title = "HIT"
							}else{
								document.title = "-"
							}
						
						 });
				
				//jCaramel.rtl = true;	
				tb = $('ul:first');
				tb.menu({ 
					owner: $('button'), 
					
					position: 'right', 
					
					ownerAction:'mouseenter',
					
					open: function(ul){
						document.title = "ID: " + ul.attr('id') +  ul.size()
						if(ul.attr('id') == 'color'){
							
							for(i = 0; i < 50; i++){
								var r = Math.round(Math.random() * 255);
								var g = Math.round(Math.random() * 255);
								var b = Math.round(Math.random() * 255);
								ul.find('#palette')
									.append( $('<div>').css('background-color', 'rgb('+r+','+g+','+b+')') )
									
							}
						}
					
				} })
				
			});
		</script>
	</head>
	<body>
		<form onsubmit="return false">
			<button>Show me</button>
		</form>
		<ul>
			<li><div class="icon-16 icon-file"></div>New</li>
			<li><div class="icon-16 icon-open"></div>Open
				<ul id="sub-opens">
					<li><div class="icon-16 icon-open"></div>Open File</li>
					<li><div class="icon-16 icon-open"></div>Open URL
						<ul>
							<li>Open Url</li>
							<li>-</li>
							<li>google.com</li>
							<li>yahoo.com</li>
						</ul>
					</li>
					<li><div class="icon-16 icon-open"></div>Open Recent
						<ul id="sub-recents">
							<li><div class="icon-16"></div>First Recent</li>
							<li><div class="icon-16"></div>Second Recent</li>
							<li><div class="icon-16"></div>Third Recent</li>
						</ul>
					</li>
					<li><div class="icon-16 icon-open"></div>Open Existing content</li>
				</ul>
			</li>
			<li><div class="icon-16 icon-save"></div>Save</li>
			<li>-</li>
			<li><div class="icon-16 icon-undo"></div>Undo last action</li>
			<li><div class="icon-16 icon-redo"></div>Redo last action</li>
			<li class="label">Last Actions</li>
			<li><div class="icon-16 icon-indent"></div>Indent selected text</li>
			<li><div class="glyph-16"></div>Select Color
				<ul id="color">
					<li class="label">Select a color from palette</li>
					<li class="widget">
						<div id="palette"></div>
					</li>
					<li>-</li>
					<li>Choose other palette...</li>
				</ul>
			</li>
			
		</ul>
	</body>
</html>